Azure Static Web Apps へGitLabのCI/CDパイプラインを使ってデプロイしてみた

いわさです。

Azure Static Web Appsでは、直接ファイルをデプロイすることは行わずに、何かしらのデプロイパイプラインを使ってデプロイを行います。
これまではGitHubとAzure DevOpsが選択肢としてサポートされていたのですが、今回GitLabとBitbucketがプレビューでサポートされました。

本日は早速GitLabで構築してみました。GitHubとはちょっと設定方法が違います。

静的Webアプリ作成

まずは、Azureポータルで静的Webアプリを作成していきます。

作成方法は従来どおりですが一箇所だけ、デプロイの詳細のソースは「その他」を選びましょう。
リポジトリ構成せずにリソース作成出来るんですね、知らなかったです。

ちなみにこの時点ではデフォルトページが表示されます。

作成後にデプロイトークンを取得しましょう。
あとはこのトークンを使って手動でパイプラインを構築します。

GitLabでパイプラインを構築する

SaaS版GitLabにリポジトリ用意しておきます。
以下のリポジトリのように、ルートにindex.htmlだけ置きました。

先程のトークンをデプロイパイプラインで認証時に使用するので、Setting -> CI/CDの変数に、Azureポータルから取得したデプロイトークンを設定しておきます。

そして、.gitlab-ci.ymlを作成し、registry.gitlab.com/static-web-apps/azure-static-web-apps-deployを使うよう構成します。

variables:
  API_TOKEN: $HOGE_TOKEN
  APP_PATH: '$CI_PROJECT_DIR'

deploy:
  stage: deploy
  image: registry.gitlab.com/static-web-apps/azure-static-web-apps-deploy
  script:
    - echo "App deployed successfully."

デプロイ

あとは勝手にデプロイされるので待機してます。
ちなみに、GitLab.comでCI/CDパイプラインを実行するためには、クレジットカードを使って本人確認を済ませておく必要がありますのでFree版でリポジトリのみご利用されている方はご注意を。

無事デプロイされましたね。

さいごに

Bitbucketの場合もデプロイトークンを取得して、手動でパイプラインを構築するという流れは同じです。
以下に手順が掲載されていますので参考にしてください。

GitHubの場合は以下のアクションを使うようにワークフローとシークレットが自動作成されるのですが、ここが自動なのか手動なのかの違いみたいですね。
アクションの中身を掘り下げていくと、もしかすると全然関係ないパイプラインからもデプロイ出来るのかもしれないなと少し思いました。機会があれば調べてみます。